<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib uri="http://www.springframework.org/security/tags"	prefix="sec"%>
<%@ taglib prefix="custom" tagdir="/WEB-INF/tags" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>${restaurantForm.restaurant.name}</title>
	
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
	<script type="text/javascript" src="/scripts/gmaps.js"></script>
	<script type="text/javascript" src="/scripts/prettify.js"></script>
	<script type="text/javascript" src="/scripts/jquery.raty.min.js"></script>
	<script type="text/javascript" src="/scripts/rates.js"></script>
	<link href='/css/prettify.css' rel='stylesheet' type='text/css' />
	<link href='/css/gmaps.styles.css' rel='stylesheet' type='text/css' />
	<style type="text/css">
	#map, #panorama {
	  height:200px;
	  background:#6699cc;
	}
	</style>
	<script type="text/javascript">
	    var map;
	    <c:if test="${found}">
		    $(document).ready(function(){
		      prettyPrint();
		      map = new GMaps({
		        div: '#map',
		        lat: ${restaurantForm.restaurant.latitude},
		        lng: ${restaurantForm.restaurant.longitude},
		        width:400,
		        height:200
		      });
		      
		      map.addMarker({
		          lat: ${restaurantForm.restaurant.latitude},
		          lng: ${restaurantForm.restaurant.longitude},
		          title: 'Marker with InfoWindow',
		          infoWindow: {
		            content: '<p>HTML Content</p>'
		          }
		        });
		      <c:if test="${restaurantForm.rate==null}">
		      	initializeUserRate();
		      </c:if>
		      <c:if test="${restaurantForm.rate!=null}">
		      	initializeUserRateWithValue(${restaurantForm.rate.food.value},
		      			${restaurantForm.rate.service.value},
		      			${restaurantForm.rate.climate.value},
		      			${restaurantForm.rate.price.value});
		      </c:if>
		      
		    });
	    </c:if>
	    <c:if test="${not found}">
	    	$(document).ready(function(){
	    		$.gritter.add({
					title: "Nie można znaleźć restauracji o podanym identyfikatorze [ID].",
					text: "Za chwilę strona przekieruje Cię do strony głównej..."
				});
	    		setTimeout(function() {
	    			window.location = '/index';
	    		}, 5000);
	    	});
	    </c:if>
	    function comment(){
	    	$('span[id^="error_"]').html('');
	    	$('#newComment').val('true');
			$("#restaurantForm").spin();
			$.ajax({
				type : "POST",
				url : '/restaurant/comment',
				data : $("#restaurantForm").serialize(),
				success : function(response) {
					$("#restaurantForm").spin(false);
					if (response.status == "FAILURE") {
						for (i = 0; i < response.errorMessageList.length; i++) {
							var item = response.errorMessageList[i];
							$("#restaurantForm"+" span[id='error_" + response.errorMessageList[i].fieldName+"']").html(
									response.errorMessageList[i].message);
						}
						$.gritter.add({
							title: response.result.title,
							text: response.result.content
						});
					}
					else {
						$.gritter.add({
							title: response.result.title,
							text: response.result.content
						});
					}
				},
				error : function(e) {
					alert(e);
				}
			});
	    }
	    
	 </script>
</head>
<body>
	<div id="content">
		<c:if test="${found}">
			<h3 style="text-align: center">${restaurantForm.restaurant.name} :</h3>
			<div class="popin">
					<div id="map"></div>
			</div>
			<br/><br/>
			<div class="border"></div>
			<h3>Komentarze: </h3>
			<c:forEach items="${restaurantForm.restaurant.comments }" var="comment" >
				<div class="comment" style="width: 100%; clear: both; height: 100%;overflow: hidden;">
				    <div class="avatar" style="width: 30%; margin: 0 0 -20000px 5px;  padding-bottom: 20000px; height: 100%; float: left;">
				        <a href="http://tutorialzine.com/">
				        <img width="64" height="64" src="${comment.user.avatarSrc }">
				        </a>
				        <div class="name"><a href="/user/${comment.user.username }">${comment.user.username }</a></div>
				        ${comment.date }
				    </div>					
				    
				    <div style="width: 65%;  padding: 0 0 0 15px;  float: left;   height: 100%;  margin-bottom: -20000px; padding-bottom: 20000px;">
					    <p>${comment.content }</p>
				    </div>
				</div>
			</c:forEach>
			<div class="border"></div>
			<sec:authorize ifNotGranted="ROLE_ANONYMOUS" >
				<form:form method="POST"  commandName="restaurantForm">
				<custom:inputTextArea label="Dodaj komentarz:" name="comment.content"/>
				<br/>
				<custom:inputHidden name="newComment" />
				<span class="button" onclick="comment()" >Dodaj opinię</span>
				</form:form>
			</sec:authorize>
		</c:if>
		<c:if test="${not found}">
		<h4>Nie można znaleźć restauracji o podanym id</h4>
		</c:if>
	</div>
	<div id="sidePanel">
	<c:if test="${found}">
		<h3>Ocena: ${average }</h3>
		<h6>Adres:</h6>
		${restaurantForm.restaurant.address }
		<h6>Strona www:</h6>
		${restaurantForm.restaurant.wwwSite }
		<h6>O lokalu:</h6>
		${restaurantForm.restaurant.description }
		<sec:authorize ifNotGranted="ROLE_ANONYMOUS" >
		<h2>Twoja ocena:</h2>
		<div id="hint"></div>
		<h6>Klimat:</h6>
		<div id="climate-stars"></div>
		<h6>Ceny:</h6>
		<div id="price-stars"></div>
		<h6>Obsługa:</h6>
		<div id="service-stars"></div>
		<h6>Jedzenie:</h6>
		<div id="food-stars"></div>
		<br/>
		<div id="overall-stars"></div>
		<br/>
		<span onclick="sendRate()" class="button">Wyślij</span>
		</sec:authorize>
	</c:if>
	</div>
	
</body>
</html>